<template>
  <div class="addOrEditProduct main-content">
    <div class="title">{{ route.query.productId ? '编辑产品' : '新增产品' }}</div>
    <el-form ref="formRef" :model="form" :rules="rules" class="addOrEdit-form" label-width="166">
      <el-col :span="10">
        <el-form-item prop="categoryId" label="产品分类">
          <el-select v-model="form.categoryId" placeholder="请选择产品分类">
            <el-option v-for="item in cateList" :value="item.categoryId" :label="item.categoryName" :key="item.categoryId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item prop="productName" label="产品名称">
          <el-input v-model="form.productName" type="text" auto-complete="off" placeholder="请输入名称"> </el-input>
        </el-form-item>
      </el-col>
      <el-form-item prop="icon" label="封面图片">
        <imageUpload v-model="form.icon" :isShowTip="false" :limit="1" />
      </el-form-item>
      <el-form-item prop="iconBig" label="产品大图">
        <imageUpload v-model="form.iconBig" :isShowTip="false" />
      </el-form-item>
      <el-form-item prop="isActive" label="是否生效">
        <el-radio-group v-model="form.isActive">
          <el-radio v-for="dict in logic_isactive" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="" label="产品参数">
        <div style="margin-right: 32px;">
          <el-form-item prop="num" label="编号" label-width="55" label-align="left">
            <el-input v-model="form.num" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="material" label="材质" label-width="55">
            <el-input v-model="form.material" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="model" label="型号" label-width="55" class="mb0">
            <el-input v-model="form.model" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
        </div>
        <div style="margin-right: 32px;">
          <el-form-item prop="specification" label="规格" label-width="55">
            <el-input v-model="form.specification" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="color" label="颜色" label-width="55">
            <el-input v-model="form.color" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="marketPrice" label="市场价" label-width="55" class="mb0">
            <el-input v-model="form.marketPrice" placeholder="请选择或输入" clearable class="w240" oninput="value=value.replace(/[^0-9.]/g,'')" />
          </el-form-item>
        </div>
        <div>
          <el-form-item prop="type" label="类型" label-width="55">
            <el-input v-model="form.type" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="brand" label="品牌" label-width="55">
            <el-input v-model="form.brand" placeholder="请选择或输入" clearable class="w240" />
          </el-form-item>
          <el-form-item prop="price" label="价格" label-width="55" class="mb0">
            <el-input v-model="form.price" placeholder="请选择或输入" clearable class="w240" oninput="value=value.replace(/[^0-9.]/g,'')" />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item prop="productDetails" label="产品详情" style="margin-bottom: 20px;">
        <editor v-model="form.productDetails" :min-height="208" />
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="addOrEditProduct">
import { listProductCategory } from '@/api/logic/productCategory';
import { addProduct, updateProduct, getProduct } from '@/api/logic/product';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { logic_isactive } = toRefs<any>(proxy?.useDict('logic_isactive'));

const route = useRoute();
const router = useRouter();

// 产品表单
const form  = ref({
    categoryId: '',
    productName: '',
    icon: [],
    iconBig: [],
    num: '',
    material: '',
    model: '',
    specification: '',
    color: '',
    marketPrice: '',
    type: '',
    brand: '',
    price: '',
    productDetails: '',
    isActive: '1'
})
// 产品校验规则
const rules = {
    categoryId: [{ required: true, trigger: 'change', message: '请选择产品分类' }],
    title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
    icon: [{ required: true, trigger: 'change', message: '请上传封面图片' }],
    iconBig: [{ required: true, trigger: 'change', message: '请上传产品大图' }],
    isActive: [{ required: true, trigger: 'change', message: '请选择是否生效' }],
    productDetails: [{ required: true, trigger: 'blur', message: '请输入产品详情' }],
}
// 产品分类
const cateList = ref([])
// 获取产品分类
const getCateList = async() => {
  try {
    const res = await listProductCategory({isActive: 1});
    cateList.value = res?.rows
  } catch (e) {
    cateList.value = []
  }
}
// 获取产品详情
const getDetail = async() => {
  const res = await getProduct(route.query.productId);
  res.data.isActive = String(res.data.isActive)
  Object.assign(form.value, res.data);
}

const formRef = ref()
// 保存产品
const confirm = () => {
  formRef.value && formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if (route.query.productId) {
        await updateProduct(form.value)
      } else {
        await addProduct(form.value)
      }
      proxy?.$modal.msgSuccess(route.query.productId ? "编辑成功" : '保存成功');
      setTimeout(() => {
        router.back()
      }, 200)
    }
  });
//   const param = {
//       parameter
// product
// cover
// product
// number
// specification
// type
// material
// color
// brand
// model
// market
// price
// is
//   }

}
// 取消
const cancel = () => {
    router.back()
}

onMounted(() =>{
    getCateList()
    if (route.query.productId) getDetail()
})
</script>

<style lang="scss" scoped>
.addOrEditProduct {
  .title {
    font-weight: 700;
    font-size: 16px;
    color: #3D3D3D;
    margin-bottom: 32px;
  }
  }
  :deep(.el-input__wrapper) {
    width: 480px;
  }
  :deep(.el-form-item.el-form-item--default) {
    margin-bottom: 32px;
  }
  :deep( .el-select.el-select--default) {
    width: 480px;
  }
  :deep( .el-input.el-input--default) {
    width: 480px;
  }
  :deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
  }
  :deep(.el-input__inner) {
    width: 480px;
    height: 40px;
    line-height: 40px;
  }
  .w240 {
    width: 240px !important;
    :deep(.el-input__wrapper){
      width: 240px !important;
    }
  }
  :deep(.editor) {
    width: 63.9vw !important;
  }
  .mb0 {
    margin-bottom: 0 !important;
  }
  // :deep(.el-form-item__label) {
  //   padding-right: 32px !important;
  // }
</style>
